<template>
  <div class="all">
    <div style="position: sticky;top: 0">
      <header>
        <div class="div" @click="back()">
          <img src="../../assets/返回.png" alt="">
          <span class="side">返回</span>
        </div>
        <div class="div">
          <span>添加好友</span>
        </div>
        <div class="div"></div>
      </header>
      <div class="search">
        <van-search
          v-model="searchValue"
          shape="round"
          placeholder="姓名、手机号"
          left-icon=""
          show-action
          autofocus
        >
          <template #left-icon>
            <div @click="onSearch">
              <van-icon name="search" />
            </div>
          </template>
          <template #action>
            <div style="" @click="onSearch" class="side">搜索</div>
          </template>
        </van-search>
      </div>
    </div>

    <div class="content">
      <ul v-for="(item, index) in list" :key="index">
        <li class="li_left" @click="clickpeoInfo(item.USER_ID)">
          <img v-if="(item.PHOTO === null || item.PHOTO === undefined || item.PHOTO === '') && Number(item.sex) === 1" src="../../assets/男患者@2x.png" alt="">
          <img v-else-if="(item.PHOTO === null || item.PHOTO === undefined || item.PHOTO === '') && Number(item.sex) === 2" src="../../assets/女患者@2x.png" alt="">
          <img  v-else :src="item.PHOTO" alt="">
<!--          <img :src="item.PHOTO != undefined && item.PHOTO.substring(0, 4) === 'http' ? item.PHOTO : imgHttp + item.PHOTO" alt="">-->
        </li>
        <li class="li_content">
          <p class="name">{{item.NICK_NAME}}</p>
        </li>
        <li class="li_right">
          <button class="btn" @click="clickAdd(item.USER_ID)">添加</button>
        </li>
      </ul>
    </div>
    <van-dialog v-model="show"
                confirm-button-color="#1da4f2"
                title="填写邀请消息"
                @confirm="onConfirm()"
                confirmButtonText="发送"
                show-cancel-button>
      <div class="pop">
        <!--            <input type="text" v-model="msg">-->
        <textarea type="text" class="input" v-model="msg" autofocus></textarea>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import videoHttp from '../../http/video.http'
import {Toast} from 'vant'
export default {
  name: 'AddFirends',
  data () {
    return {
      show: false,
      searchValue: '',
      userid: '',
      from_user_id: '',
      list: [],
      imgHttp: videoHttp.imgHttp,
      msg: '',
      ids: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.from_user_id = this.$utils.getUrlKey('userid')
    $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
  },
  methods: {
    // 点击查看个人详情
    clickpeoInfo (id) {
      this.$router.push({path: '/detailsFriend', query: {userid: id}})
    },
    // 搜索 未添加的好友
    onSearch () {
      this.$http.findFeiFriend({from_user_id: this.from_user_id, name: this.searchValue})
        .then(res => {
          console.log(res)
          this.list = res.data.data
          // this.searchValue = ''
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击添加
    clickAdd (id) {
      this.ids = id
      console.log(this.ids)
      this.show = true
      this.$nextTick(() => {
        console.log($('.input').focus())
      }, 100)
    },
    // 验证消息确认按钮
    onConfirm () {
      this.$http.insertCircle({from_user_id: this.userid, ids: this.ids, msg: this.msg})
        .then(res => {
          console.log(res)
          // this.searchValue = ''
          this.msg = ''
          this.onSearch()
          Toast('操作成功')
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
  }
  header .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  header .div:nth-child(2){
    justify-content: center;
  }
  header .div:nth-child(3){
    flex-direction: row-reverse;
  }
  header .div:nth-child(3) .side{
    margin-right: 15px;
  }
  header .div img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .side{
    color: #1da4f2;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
/*  搜索*/
  .search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    padding: 5px 0;
  }
  .search .side{
    margin-left: 10px;
  }
  /deep/ .van-search {
    width: 92%;
  }
  /deep/ .van-icon-search::before {
    content: '\F0AF';
    padding-left: 10px;
  }
  /deep/ .van-field__control{
    font-weight: bold;
    font-size: 15px;
  }
  .content{
    width: 100%;
    background: #FAF9FE;
  }
  .content ul {
    width: 100%;
    background: #FFFFFF;
    height: 75px;
    display: flex;
    border-top: 1px solid #E5E5E5;
  }
  .content ul li{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .li_left, .li_right{
    width: 22%;
  }
  .li_left img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .li_content{
    width: 55%;
    flex-direction: column;
  }
  .li_content p{
    width: 100%;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .name{
    font-size: 17px;
    color: #333333;
    /*margin-bottom: 5px;*/
  }
  .phone{
    font-size: 13px;
    color: rgba(153, 153, 153, 1);
  }
  .btn{
    width: 60px;
    height: 29px;
    background: #1DA4F2;
    border-radius: 14px;
    border: none;
    color: #FFFFFF;
  }
  .pop{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pop textarea{
    width: 80%;
    height: 30px;
    line-height: 30px;
    padding: 5px;
    border: none;
    background: #FAF9FE;
    resize: none;
  }
</style>
